<template>
  <el-card shadow="never" class="aui-card--fill">
    <div>
      <div class="control-section"
           v-loading="loading">
        <div id="spreadsheet-default-section">
          <ejs-spreadsheet ref="spreadsheet"
                          allowEditing="true"
                          :created="createdHandler"
                          :beforeDataBound="createdHandler"
                          :beforeCellRender="beforeCellRender"
                          height="800" >
            <e-sheets>
              <e-sheet name="TruMethod">
                <e-rows>
                  <e-row>
                    <e-cells>
                      <e-cell index=1 value="Company"></e-cell>
                      <e-cell :value="tenantName"></e-cell>
                      <e-cell index=5 value="TruMethods"></e-cell>
                    </e-cells>
                  </e-row>
                  <e-row>
                    <e-cells>
                      <e-cell index=1 value="Year"></e-cell>
                      <e-cell value="2020"></e-cell>
                    </e-cells>
                  </e-row>
                  <e-row>
                    <e-cells>
                        <e-cell index=3 colSpan=12 value="Monthly Input"></e-cell>
                    </e-cells>
                  </e-row>
                  <template v-for="item in dataSource">
                    <e-row :key="item.Category">
                      <e-cells>
                          <e-cell index=2 :value="item.Category" style="background-color: 007bff;"></e-cell>
                          <e-cell v-for="month in item.Months" :key="month" :value="month" ></e-cell>
                      </e-cells>
                    </e-row>
                    <e-row v-for="subItem in item.Data" :key="subItem.Index">
                      <e-cells>
                          <e-cell :value="subItem.index"></e-cell>
                          <e-cell :value="subItem.name"></e-cell>
                          <e-cell :value="subItem.description"></e-cell>
                          <e-cell v-for="amount in subItem.amounts" :key="amount" :value="amount" format="#,##0.00"></e-cell>
                      </e-cells>
                    </e-row>
                  </template>
                </e-rows>
                <e-columns>
                  <e-column :width="width1"></e-column>
                  <e-column :width="width2"></e-column>
                  <e-column :width="width3"></e-column>
                  <e-column :width="width2"></e-column>
                  <e-column :width="width2"></e-column>
                  <e-column :width="width2"></e-column>
                  <e-column :width="width2"></e-column>
                  <e-column :width="width2"></e-column>
                  <e-column :width="width2"></e-column>
                  <e-column :width="width2"></e-column>
                  <e-column :width="width2"></e-column>
                  <e-column :width="width2"></e-column>
                  <e-column :width="width2"></e-column>
                  <e-column :width="width2"></e-column>
                  <e-column :width="width2"></e-column>
                  <e-column :width="width2"></e-column>
                </e-columns>
              </e-sheet>
            </e-sheets>
          </ejs-spreadsheet>
        </div>
      </div>
    </div>
  </el-card>
</template>

<script>

export default {
  data () {
    return {
      rowIndex: 30,
      colIndex: 4,
      width1: 40,
      width2: 120,
      width3: 240,
      dataSource: [
        {
          Category: 'General',
          Months: ['Jan-20', 'Feb-20', 'Mar-20', 'Apr-20', 'May-20', 'Jun-20',
            'Jul-20', 'Aug-20', 'Sep-20', 'Oct-20', 'Nov-20', 'Dec-20'],
          Data: [
            {
              index: 1,
              name: 'IN.GE.EPM',
              description: '# of Endpoint Managed',
              amounts: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
            },
            {
              index: 2,
              name: 'IN.GE.SM',
              description: '# of Seats Managed',
              amounts: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
            },
            {
              index: 3,
              name: 'IN.GE.MSA',
              description: '# of Manage Services Agreements',
              amounts: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
            },
            {
              index: 4,
              name: 'IN.GE.FTE',
              description: '# of Employees (FTE)',
              amounts: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
            },
            {
              index: 5,
              name: 'IN.GE.SDE',
              description: '# of Support Desk Employees',
              amounts: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
            },
            {
              index: 6,
              name: 'IN.GE.PSE',
              description: '# of Professional Services Employees',
              amounts: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
            },
            {
              index: 7,
              name: 'IN.GE.AE',
              description: '# of Alignment Engineers',
              amounts: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
            },
            {
              index: 8,
              name: 'IN.GE.CSE',
              description: '# of Centralized Services Employees',
              amounts: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
            },
            {
              index: 9,
              name: 'IN.GE.VCIO',
              description: '# of vCIO Employees',
              amounts: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
            },
            {
              index: 10,
              name: 'IN.GE.OTH',
              description: '# of Other Technical Resources',
              amounts: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
            },
            {
              index: 11,
              name: 'OUT.GE.TECH',
              description: '# of Technical Employees',
              amounts: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
            }
          ]
        }
      ],
      tenantName: this.$store.state.user.tenantName,
      dataForm: {
        id: this.$getQuery('id'),
        businessId: this.$getQuery('businessId'),
        content: null,
        name: null,
        businessType: null,
        type: 1
      },
      loading: false
    }
  },
  created () {
    this.loadDataset()
  },
  methods: {
    loadDataset () {
      this.loading = true
      const params = {
        tenantCode: this.$store.state.user.tenantCode,
        timeStart: '2020-01-01',
        timeEnd: '2020-12-31'
      }

      this.$interface.temp.getQBRData(params)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          }
          res.data.forEach(e => {
            this.dataSource.push(e)
          })
          this.loading = false
        })
        .catch(() => {
          this.loading = false
        })
    },
    createdHandler () {
      var spreadsheet = this.$refs.spreadsheet

      spreadsheet.cellFormat({ backgroundColor: '#ffff00', fontWeight: 'bold', textAlign: 'left' }, 'C1:C1')
      spreadsheet.cellFormat({ backgroundColor: '#ffff00', fontWeight: 'bold', textAlign: 'left' }, 'C2:C2')
      spreadsheet.cellFormat({ backgroundColor: '#0e0b94', color: '#ffffff', fontWeight: 'bold', textAlign: 'center' }, 'F1')

      spreadsheet.cellFormat({ backgroundColor: '#0e0b94', color: '#ffffff', fontWeight: 'bold', textAlign: 'left' }, 'D3:P3')
      spreadsheet.cellFormat({ backgroundColor: '#0e0b94', color: '#ffffff', fontWeight: 'bold', textAlign: 'center' }, 'A4:P4')
      spreadsheet.cellFormat({ backgroundColor: '#0e0b94', color: '#ffffff', fontWeight: 'bold', textAlign: 'center' }, 'A16:P16')
      spreadsheet.cellFormat({ backgroundColor: '#0e0b94', color: '#ffffff', fontWeight: 'bold', textAlign: 'center' }, 'A22:P22')
      spreadsheet.cellFormat({ backgroundColor: '#0e0b94', color: '#ffffff', fontWeight: 'bold', textAlign: 'center' }, 'A30:P30')

      spreadsheet.cellFormat({ backgroundColor: '#ffff00' }, 'D5:O5')
      spreadsheet.cellFormat({ backgroundColor: '#ffff00' }, 'D6:O6')
      spreadsheet.cellFormat({ backgroundColor: '#ffff00' }, 'D7:O7')
      spreadsheet.cellFormat({ backgroundColor: '#ffff00' }, 'D8:O8')
      spreadsheet.cellFormat({ backgroundColor: '#ffff00' }, 'D9:O9')
      spreadsheet.cellFormat({ backgroundColor: '#ffff00' }, 'D10:O10')
      spreadsheet.cellFormat({ backgroundColor: '#ffff00' }, 'D11:O11')
      spreadsheet.cellFormat({ backgroundColor: '#ffff00' }, 'D12:O12')
      spreadsheet.cellFormat({ backgroundColor: '#ffff00' }, 'D13:O13')
      spreadsheet.cellFormat({ backgroundColor: '#ffff00' }, 'D14:O14')

      spreadsheet.cellFormat({ backgroundColor: '#ffff00' }, 'D17:O17')
      spreadsheet.cellFormat({ backgroundColor: '#ffff00' }, 'D19:O19')
      spreadsheet.cellFormat({ backgroundColor: '#ffff00' }, 'D20:O20')

      spreadsheet.cellFormat({ backgroundColor: '#ffff00' }, 'D23:O23')
      spreadsheet.cellFormat({ backgroundColor: '#ffff00' }, 'D24:O24')
      spreadsheet.cellFormat({ backgroundColor: '#ffff00' }, 'D25:O25')
      spreadsheet.cellFormat({ backgroundColor: '#ffff00' }, 'D26:O26')
      spreadsheet.cellFormat({ backgroundColor: '#ffff00' }, 'D27:O27')
      spreadsheet.cellFormat({ backgroundColor: '#ffff00' }, 'D28:O28')

      spreadsheet.cellFormat({ backgroundColor: '#ffff00' }, 'D31:O31')
      spreadsheet.cellFormat({ backgroundColor: '#ffff00' }, 'D32:O32')
      spreadsheet.cellFormat({ backgroundColor: '#ffff00' }, 'D33:O33')
      spreadsheet.cellFormat({ backgroundColor: '#ffff00' }, 'D34:O34')
      spreadsheet.cellFormat({ backgroundColor: '#ffff00' }, 'D35:O35')
      spreadsheet.cellFormat({ backgroundColor: '#ffff00' }, 'D36:O36')
    },
    beforeCellRender (args) {
      if (this.applyCellFormat()) {
        if (args.cell && args.cell.value) {
          // Applying cell formatting before rendering the particular cell
          // if (args.element.dataset.color === 'blue') {
          //  this.$refs.spreadsheet.cellFormat({ backgroundColor: '#0e0b94', color: '#ffffff', textAlign: 'center' }, args.address)
          // }
        }
      }
    },
    applyCellFormat: function () {
      return !this.$refs.spreadsheet.ej2Instances.isOpen && this.$refs.spreadsheet.ej2Instances.sheets[this.$refs.spreadsheet.ej2Instances.activeSheetIndex].name === 'TruMethod'
    }
  }
}
</script>

<style>

</style>
